<script lang="ts" setup>
import { ref, onMounted } from "vue";
import Registro from "@/components/Login/registro.vue";
import Entrar from "@/components/Login/entrar.vue";
import { useRouter, useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const selectType: any = ref("1");
function definiteSelect(type) {
  selectType.value = type;
}
const router = useRouter();
const getRoute = useRoute();
onMounted(() => {
  localStorage.removeItem("openSidebar");
  if (getRoute.query.type) {
    selectType.value = getRoute.query.type;
  }
});
function returnPage() {
  router.go(-1);
}
</script>
<template>
  <div class="frame-div">
    <div class="navigation-frame">
      <div class="daohng-frame">
        <div class="daohng-content">
          <div class="fanhui df ai-center jc-center" @click="returnPage">
            <img class="fanhui-img" src="@/image/new_img/huitui_bai.png" />
          </div>
          <div class="title-frame">{{ t("login.LogIn") }}</div>
          <div class="fanhui-right"></div>
        </div>
      </div>
    </div>
    <div class="segment-div"></div>
    <div class="document-info-frame">
      <img class="title-img" src="@/image/new_img/home/logo2.png" />
      <div class="text-frame">
        <text class="text-info1">br11.com</text>
        <div class="text-info2">Bem-vindo à br11.com</div>
      </div>
    </div>
    <div class="segment-div1"></div>
    <div class="select-type-frame">
      <div class="select-frame">
        <div
          class="select-name"
          :class="{ definiteStyle: selectType == '1' }"
          @click="definiteSelect('1')"
        >
          {{ t("login.LogIn") }}
        </div>
        <div
          class="select-name"
          :class="{ definiteStyle: selectType == '2' }"
          @click="definiteSelect('2')"
        >
          {{ t("login.Registro") }}
        </div>
      </div>
      <div class="select-strip"></div>
      <!-- 登录 -->
      <div v-show="selectType == '1'" class="input-logon-frame select-type-frame">
        <Entrar />
      </div>
      <!-- 注册 -->
      <div v-show="selectType == '2'" class="input-logon-frame select-type-frame">
        <Registro />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.frame-div {
  width: 100%;
  height: 100%;
  background-image: url(@/image/new_img/main_bg_2.png);
  background-size: cover;
  background-repeat: repeat;
  position: relative;
  left: 0;
  top: 0;
  transform: scale(1);
}

.navigation-frame {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;

  .daohng-frame {
    width: 100%;
    background-size: 100% 100%;
    object-fit: cover;
    height: 105px;
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 9999;
    left: 0;
    right: 0;
    top: 0;
  }

  .daohng-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
    position: relative;
    left: 0;
    top: 0;
  }

  .fanhui {
    width: 75px;
    height: 75px;
    margin-left: 38px;
    border-radius: 50%;
    background-color: #ffffff14;
    .fanhui-img {
      width: 42px;
      height: 42px;
    }
  }
  .fanhui-right {
    width: 75px;
    height: 75px;
  }

  .title-frame {
    font-size: 32px;
    color: #fff;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "-apple-system, BlinkMa";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.segment-div {
  width: 100%;
  height: 152px;
}

.document-info-frame {
  width: 100%;
  display: flex;
  align-items: center;
  height: auto;
  margin-top: 16px;
  .title-img {
    width: 82px;
    height: 82px;
    margin-left: 38px;
    border-radius: 10px;
  }

  .text-info1 {
    color: #ffffff;
    font-size: 64px;
    margin-left: 20px;
  }

  .text-info2 {
    color: rgba(255, 255, 255, 0.85);
    margin-left: 10px;
    margin-top: 18px;
    font-size: 18.08px;
  }

  .text-frame {
    display: flex;
  }
}

.segment-div1 {
  width: 100%;
  height: 38px;
}

.select-type-frame {
  width: 90%;
  margin: auto;
  height: auto;

  .select-frame {
    display: flex;
    width: 100%;
  }

  .select-name {
    font-size: 36px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  }

  .definiteStyle {
    border-color: #ab3fe7;
    color: #ab3fe7;
  }
}

.input-logon-frame {
  width: 100%;
  height: auto;
  margin-top: 44px;
}
</style>
